/* stylelint-disable docusaurus/copyright-header */
/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  /* Darker blue theme
  --ifm-color-primary: #3578e5;
  --ifm-color-primary-dark: #306cce;
  --ifm-color-primary-darker: #2d66c3;
  --ifm-color-primary-darkest: #2554a0;
  --ifm-color-primary-light: #538ce9;
  --ifm-color-primary-lighter: #72a1ed;
  --ifm-color-primary-lightest: #9abcf2; */

  /* DataHub blue theme */
  --ifm-color-primary: #4398c8;
  --ifm-color-primary-dark: #368aba;
  --ifm-color-primary-darker: #3383b0;
  --ifm-color-primary-darkest: #2a6c91;
  --ifm-color-primary-light: #58a3ce;
  --ifm-color-primary-lighter: #62a9d1;
  --ifm-color-primary-lightest: #81bada;

  /* Purple color theme
  --ifm-color-primary: #a547c4;
  --ifm-color-primary-dark: #973ab6;
  --ifm-color-primary-darker: #8f37ac;
  --ifm-color-primary-darkest: #762d8e;
  --ifm-color-primary-light: #af5bca;
  --ifm-color-primary-lighter: #b465ce;
  --ifm-color-primary-lightest: #c384d7;; */

  --ifm-code-font-size: 90%;
}

/* Purple color theme
html[data-theme='dark'] {
  --ifm-color-primary: #c371de;
  --ifm-color-primary-dark: #b856d8;
  --ifm-color-primary-darker: #b248d5;
  --ifm-color-primary-darkest: #9a2cbe;
  --ifm-color-primary-light: #ce8ce4;
  --ifm-color-primary-lighter: #d49ae7;
  --ifm-color-primary-lightest: #e5c3f1;
} */

/* .docusaurus-highlight-code-line {
  background-color: rgb(72, 77, 91);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
} */

.codeBlockTitle_node_modules-\@docusaurus-theme-classic-lib-next-theme-CodeBlock-,
.codeBlockLines_node_modules-\@docusaurus-theme-classic-lib-next-theme-CodeBlock- {
  font-size: 0.9em !important;
}

.navbar__title {
  font-size: 1.25rem;
  font-weight: 600;
}

.navbar__item {
  font-size: 1.25rem;
  padding: 0rem 1rem;
}

.navbar-saas-button {
  margin-right: 1rem;
  margin-left: 1rem;
  padding: 0.1rem 1.5rem;
  color: var(--ifm-button-color);
}

.navbar-saas-button:hover {
  color: var(--ifm-button-color);
}

@media screen and (max-width: 996px) {
  .navbar-saas-button {
    margin-left: 0rem;
    padding: 0.5rem 1rem;
  }
  .navbar-saas-button:hover {
    background: var(--ifm-color-primary-dark);
  }
}
